<template>
  <v-card height="100%" flat>
    <v-toolbar class="rounded-t-lg" color="#626C84" height="40">
      <v-toolbar-title> Item Cate </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            color="#fff"
            v-on="on"
            v-bind="attrs"
            class="pointer"
            @click="openAddItem"
          >
            mdi-plus
          </v-icon>
        </template>
        <span>Add Item Cate</span>
      </v-tooltip>
      <!-- <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            v-on="on"
            v-bind="attrs"
            color="#fff"
            class="pointer ml-2 arrow-icon"
          >
            mdi-arrow-collapse
          </v-icon>
        </template>
        <span>shrink</span>
      </v-tooltip> -->
    </v-toolbar>
    <v-skeleton-loader
      v-if="loading"
      height="calc(100% - 40px)"
      tile
      type="list-item@20"
    ></v-skeleton-loader>
    <Table
      v-else
      @edit="openEditItem"
      @delete="openDeleteItem"
      :rounded="false"
      :headers="headers"
      :showHeaderAction="false"
      :items="items"
      addTooltip="Add Item Cate"
      editTooltip="Edit Item Cate"
      deleteTooltip="Delete Item Cate"
      hide-default-footer
    >
    </Table>
    <Dialog
      v-model="showDialog"
      @submit="save"
      :title="dialogTitle"
      :show-save="step !== 3"
      width="480"
    >
      <v-card min-height="168">
        <AddEditItemCate
          v-if="step === 1 || step === 2"
          ref="addEditItemCate"
        ></AddEditItemCate>
        <DeleteItemCate
          v-else
          ref="DeleteItemCate"
          :item="selectedItem"
          @delete="deleteItemCate"
        ></DeleteItemCate>
      </v-card>
    </Dialog>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditItemCate from "@/components/Maintenance/Setting/ProblemType/AddEditItemCate.vue";
import DeleteItemCate from "@/components/Maintenance/Setting/ProblemType/DeleteItemCate.vue";
interface IIteaCateItem {
  id: string;
  cate: string;
  description: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditItemCate,
    DeleteItemCate,
  },
})
export default class ItemCate extends Vue {
  // 1.Add 2.Edit 2.Delete
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  //item Cate
  selectedItem: IIteaCateItem | null = null;
  loading = false;
  headers = [
    {
      text: "Item Cate",
      value: "cate",
    },
    {
      text: "Cate Description",
      value: "description",
    },
    {
      text: "",
      value: "action",
      align: "end",
    },
  ];
  items: IIteaCateItem[] = [];
  getItemCateItems() {
    this.loading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          cate: "TT1",
          description: "Air Conditioner",
        },
        {
          id: "2",
          cate: "DN",
          description: "Cooling system",
        },
      ];
      this.loading = false;
    }, 3500);
  }
  // action
  openAddItem() {
    this.step = 1;
    this.dialogTitle = "Add Item Cate";
    this.$nextTick(() => {
      const addEditItemCateRef = this.$refs.addEditItemCate as AddEditItemCate;
      addEditItemCateRef.resetForm();
    });
    this.openDialog();
  }
  openEditItem(item: IIteaCateItem) {
    this.step = 2;
    this.dialogTitle = "Edit Item Cate";
    this.selectedItem = item;
    this.$nextTick(() => {
      const addEditItemCateRef = this.$refs.addEditItemCate as AddEditItemCate;
      addEditItemCateRef.resetForm();
      setTimeout(() => {
        addEditItemCateRef.setFormData(item);
      });
    });
    this.openDialog();
  }
  openDeleteItem(item: IIteaCateItem) {
    this.step = 3;
    this.dialogTitle = "Delete Item Cate";
    this.selectedItem = item;
    this.openDialog();
  }

  async save() {
    const addEditItemCateRef = this.$refs.addEditItemCate as AddEditItemCate;
    const result = await addEditItemCateRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.addItemCate(result as IIteaCateItem);
      } else {
        this.editItemCate(
          this.selectedItem as IIteaCateItem,
          result as IIteaCateItem
        );
      }
      this.closeDialog();
    }
  }

  addItemCate(item: IIteaCateItem) {
    this.items.push(item);
  }

  editItemCate(itemCate: IIteaCateItem, item: IIteaCateItem) {
    Object.assign(itemCate, item);
  }

  deleteItemCate(item: IIteaCateItem) {
    const index = this.items.indexOf(item);
    this.items.splice(index, 1);
    this.closeDialog();
  }
  created() {
    this.getItemCateItems();
  }
}
</script>
<style lang="scss"></style>
